<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="app">
			<li v-for="todo in todos">
				{{todo}}
			</li>
			<hr />
			<li v-for="(item, index) in family">
				{{index+1}}: {{item.msg}}
			</li>
			
			<hr />
			<li v-for="(value, name, index) in info">
				{{index +1 }} : {{name}} = {{value}}
			</li>
			
		</div>
		
	</body>
</html>

<script type="text/javascript">
	var vm  = new Vue({
		el:'#app',
		data:{
			todos:[
				'shopping',
				'swimming',
				'hiking'						
			],
			family:[
				{msg: 'abc'},
				{msg:'def'},
				{msg:'ghi'}
			],
			
			info:{
				title: '欣然奶茶店',
				address: '吉安',
				time: '2020'
			}
			
		}
	})
</script>